<template>
  <a-form
    labelAlign="left"
    :label-col="{ span: 11 }"
    :wrapper-col="{ span: 13 }"
    :colon="false"
  >
    <!-- <a-collapse
      v-model:activeKey="activeKey"
      :bordered="false"
      expandIconPosition="right"
    >
      <a-collapse-panel key="layout" header="布局"> -->
    <a-form-item label="表单模式">
      <a-switch v-model:checked="store.wrapFormFieldToken" />
    </a-form-item>
    <a-form-item v-if="store.wrapFormFieldToken" label="包裹readonly">
      <a-switch v-model:checked="store.wrapReadonlyToken" />
    </a-form-item>
    <a-form-item label="列数">
      <a-input-number
        :min="1"
        :max="10"
        v-model:value="store.columnNum"
        style="width: 100%"
      />
    </a-form-item>
    <template v-if="!store.isElement">
      <a-form-item label="LabelCol">
        <a-input-number
          :min="1"
          :max="24"
          v-model:value="layoutConfig.formLayout.labelCol.span"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="WrapperCol">
        <a-input-number
          :min="1"
          :max="24"
          v-model:value="layoutConfig.formLayout.wrapperCol.span"
          style="width: 100%"
        />
      </a-form-item>
    </template>
    <template v-else>
      <a-form-item label="labelWidth">
        <a-input-number
          v-model:value="layoutConfig.formLayout.labelWidth"
          style="width: 100%"
        />
      </a-form-item>
    </template>
    <!-- </a-collapse-panel>
    </a-collapse> -->
  </a-form>
</template>

<script setup>
import { ref, computed } from "vue";
import { useFormStore } from "@/store/form";
const store = useFormStore();

const props = defineProps({
  layoutConfig: {
    type: Object,
    required: true,
  },
});
const activeKey = ref("layout");
</script>

<style lang="less" scoped></style>
